<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入 layui 的样式 -->
    <link rel="stylesheet" href="../assets/lib/layui/css/layui.css" />
    <style>
        /* 设置盒子全局样式 */
        html,
        body {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 15px;
            background-color: #f2f3f5;
        }

        .layui-form {
            width: 500px;
        }

        .layui-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    </style>

</head>

<body>
    <!-- 卡片区域 -->
    <div class="layui-card">
        <div class="layui-card-header">
            <span>文章类别管理</span>
            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="btnAddCate">添加类别</button></div>
        <div class="layui-card-body">

            <table class="layui-table">
                <!-- colgroup 规定每一列的样式规范 -->
                <colgroup>
                    <col />
                    <col />
                    <!-- 一半表格每一行的宽度都希望他自适应，但是一般让操作栏进行固定 -->
                    <col width="200" />
                </colgroup>
                <thead>
                    <tr>
                        <th>分类名称</th>
                        <th>分类别名</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</body>
<script src="../assets/lib/layui/layui.all.js"></script>
<!-- 导入jquery -->
<script src="../assets/lib/jquery.js"></script>
<!-- 导入baseapi -->
<script src="../assets/js/mybaseAPI.js"></script>
<!--发哦如template -->
<script src="../assets/lib/template-web.js"></script>
<script>
    // 1 业务逻辑:初始化文章列表
    initArtCateList()
    let layer = layui.layer
    let form = layui.form
    // 2 监听添加类别btnaddCate 按钮，弹出提示框
    $('#btnAddCate').on('click', function (event) {

        // 阻止默认行为
        event.preventDefault()
        // 开启弹框 将开启的弹框赋值给外部在这种作用域中的indexAdd变量
        let indexadd = layer.open({
            type: 1,
            area: ['500px', '250px'], // 弹框大小
            title: '添加文章类别',
            content: $('#dialog-add').html()
        })
    })
    // 3 通过事件代理 （委托）的方式，将form-add表单绑定submit提交事件，给到body
    $('body').on('submit', '#form-add', function (event) {
        // 阻止默认事件
        event.preventDefault()
        // 构建入参数据结构  
        let data = {
            name: $('#form-add' [name = name]).val(),
            alias: $('#form-add' [name = alias]).val()

        }
        // 调用接口
        $.ajax({
            method: 'POST',
            url: '/my/article/addcates',
            data: data,
            success: function (res) {
                // 判断接口是否调用成功
                if (res.status !== 0) {
                    return layer.msg(res.message || '添加分类失败')
                }
                return layer.msg(res.message || '添加分类成功')
                // 概念比弹窗哪一个
                layer.close(indexadd)
                // 添加成功后重新渲染列表数据
                initArtCateList()
            }
        })
    })
    // 4 通过事件委托的方式点击编辑按钮
    $('body').on('click', '#edit-Cate', function (event) {
        // 阻止默认事件
        event.preventDefault()
        // 开启编辑弹框
        let indexEidt = layer.open({
            type: 1,
            area: ['500px', '250px'], // 弹框大小
            title: '添加文章类别',
            content: $('#dialog-edit').html()
        })
        // 发起请求，获取当前编辑按钮的的类别信息
        // 给模板引擎的编辑按钮添加自定义属性 data-id => attr
        let id = $(this).attr('data-id') //this指向监听到的事件源
        $.ajax({
            method: 'GET',
            url: '/my/article/cates/' + id,
            success: function (res) {
                console.log(res);
                if (res.status !== 0) {
                    return console.log(111);
                }
                //将查询到的数据放到表单中
                form.val('formEditInfo', res.data)
            }


        })
    })
    // 5 通过事件委托，提交给编辑表单
    $('body').on('click', '#form-edit', function (event) {
        //阻止默认事件
        event.preventDefault()
        // 构建入参
        let data = {
            Id: $('#form-edit [name=Id]').val(),
            name: $('#form-edit [name=name]').val(),
            alias: $('#form-edit [name=alias]').val()
        }
        // 调用接口
        $.ajax({
            method: 'GET',
            url: '/my/article/updatecate',
            data: $(this).serialize(),
            success: function (res) {
                //判断接口调用是否成功
                if (res.status !== 0) {
                    return layer.msg(res.message || '修改分类失败')
                }
                layer.msg(res.message || '修改分类成功')
                //关闭弹框，说明你关闭的是哪一个
                layer.close('indexEdit')
                //添加成功后，需要重新渲染数据
                initArtCateList()
            }
        })
    })
    //  6  通过事件委托，删除表单
    $('tbody').on('click', "btn-del", function (event) {
        // 阻止默认事件
        event.preventDefault()
        let that_ = this
        // 开启弹框
        let delIndex = layer.confirm('确认删除？', { //提示文本
            icon: 3, //指定提示图标
            title: '提示' // 弹框标题
        }, function (index) { // 当点击确定时，会执行的方法
            // 当点击确定后，调用删除接口
            // 6.1 获取 id
            // 给模板引擎的编辑按钮添加自定义属性吗， data-id =》 attr
            // that 指向是监听到的事件源 =》 编辑按钮
            let id = $(that_).attr('data-id')
            // 6.2 调用接口
            $.ajax({
                method: 'GET',
                url: '/my/article/deletecate/' + id,

                success: function (res) {
                    //判断接口调用是否成功
                    if (res.status !== 0) {
                        return layer.msg(res.message || '删除分类失败')
                    }
                    layer.msg(res.message || '删除分类成功')
                    //关闭弹框，说明你关闭的是哪一个
                    layer.close('delIndex')
                    //添加成功后，需要重新渲染数据
                    initArtCateList()
                }
            })
        })

    })


    // 工具
    // 1 发起ajax请求调用接口
    function initArtCateList() {
        $.ajax({
            method: 'GET',
            url: '/my/article/cates',

            success: function (res) {
                // 判断是否请求成功
                if (res.status !== 0) {
                    return layer.msg(res.message || '获取列表失败')
                }
                // 使用模板引擎 ，将生成的模板放在页面上
                let htmlStr = template('tpl-table', res)
                // 找到需要插入的容器，并放入模板
                $('tbody').html(htmlStr)

            }
        })
    }
</script>
<!-- 定义类别数据的模板 -->
<script type="text/html" id="tpl-table">
    {{each data}}
    <tr>
        <td>{{$value.name}}</td>
        <td>{{$value.alias}}</td>
        <td>
            <button type="button" class="layui-btn layui-btn-xs" id="edit-Cate" data-id="{{$value.Id}}">编辑</button>
            <button type="button" class="layui-btn  layui-btn-danger layui-btn-xs" id="btn-del"
                data-id="{{$value.Id}}">删除</button>
        </td>
    </tr>
    {{/each}}
</script>
<!-- 添加类别弹框模板 -->
<script type="text/html" id="dialog-add">
    <form class="layui-form" id="form-add">
        <div class="layui-form-item">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <!-- 分类名称 -->
        <div class="layui-form-item">
            <label class="layui-form-label">分类别名</label>
            <div class="layui-input-block">
                <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <!-- 分类别名 -->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</script>
<!-- 添加编辑弹框模板 -->
<script type="text/html" id="dialog-edit">
    <form class="layui-form" id="form-edit" lay-filter="formEditInfo">
        <!-- 隐藏的id输入框 -->
        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label">用户id</label>
            <div class="layui-input-block">
                <input type="text" name="Id" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <!-- 分类名称 -->
        <div class="layui-form-item">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <!-- 分类名称 -->
        <div class="layui-form-item">
            <label class="layui-form-label">分类别名</label>
            <div class="layui-input-block">
                <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <!-- 分类别名 -->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</script>

</html>